<template>
  <Space class="footer-buttons" v-if="fastConfigFun">
    <slot></slot>
    <!-- <Button v-if="fastConfig" @click="fastConfigFun"> 快速配置 </Button> -->
    <Button v-if="readonly" @click="onEdit()"> 编辑 </Button>
    <template v-else>
      <Button type="primary" :loading="loading" @click="submit()">
        确认
      </Button>
      <Button @click="onCancel()">取消</Button>
    </template>
  </Space>
</template>

<script setup lang="tsx">
import { inject, ref } from 'vue';
import { Button, Space, message } from 'ant-design-vue';
import { useRequest } from 'vue-request';
import { listToEnum } from '@/utils/utils';
import { getDictType } from '@/api/monitor';
import { saveRecord } from '@/api/notice';

const typeEnum: any = ref();
const fastConfigFun: any = inject('fastConfig');
const currentTab: any = inject('tab');
const dictInit = () => {
  getDictType('device_operate_type').then((res) => {
    typeEnum.value = listToEnum(res.data as any, 'dictLabel', 'dictCode');
  });
};

fastConfigFun && dictInit();
defineOptions({
  name: 'FooterButtons',
});

const pushList: any = {
  runningMode: '运行模式',
  mqtt: '授权参数',
  warn: '预警参数',
  report: '速报参数',
  volume: '声音参数',
  netty: '管理服务',
  file: '文件服务',
  gps: '定位服务',
  ntp: '对时服务',
  weather: '气象服务',
  theme: '首页配置',
  energy: '屏显配置',
  device: '设备配置',
  ethernet: '网络调试',
  rtmp: '远程操作',
  brand: '品牌配置',
  Mesh: '无线组网',
  gpioControl: 'GPIO配置',
  Meter: '烈度计',
};

const operateUriList: any = {
  runningMode: '/device/updateRunningModeConifg',
  mqtt: '/device/updateMqttConfig',
  warn: '/device/updateWarnConfig',
  report: '/device/updateReportConfig',
  volume: '/device/updateVolumeConfig',
  netty: '/device/updateFileConfig',
  file: '/device/updateNettyConfig',
  gps: '/device/updateGpsConfig',
  ntp: '/device/updateNtpConfig',
  weather: '/device/updateWeatherConfig',
  theme: '/device/updateThemeConfig',
  energy: '/device/updateEnergyConfig',
  device:
    '/device/updateDeviceConfig,/device/updateEthernetConfig,/device/updateVideoConfig',
  ethernet: '/device/networkCheck',
  rtmp: '/device/updateRtmpConfig',
  brand: '/device/updateDeviceBrand',
  Mesh: '/device/updateMeshConfig',
  gpioControl: '/device/updateGpioControlConfig',
  Meter: '/device/updateIntensityMeterConfig',
};

interface Props {
  readonly: boolean;
  formState: Record<string, any>;
  serviceApi: (params: any) => Promise<any>;
  formRef: any;
  fastConfig?: boolean;
}
const props = defineProps<Props>();
const emit = defineEmits(['update:readonly', 'refresh']);

const onCancel = () => {
  props.formRef.clearValidate();
  props.formRef.resetFields();
  emit('update:readonly', true);
};
const onEdit = () => {
  emit('update:readonly', false);
};
const extractUrlFromFunction = (funcStr: string) => {
  const regex = /url:\s*"([^"]+)"/;
  const match = funcStr.match(regex);
  return match ? match[1] : null;
};

const service = async (params: any) => {
  return await props.serviceApi(params);
};
const { loading, runAsync } = useRequest(service, {
  manual: true,
  debounceInterval: 500,
});
const submit = async () => {
  try {
    const state = await props.formRef.validate();
    const res = await runAsync(props.formState);
    saveRecordFn(
      props.formState,
      { code: 200 },
      '推送',
      JSON.stringify(props.formState),
    );
    message.success('操作成功');
    emit('update:readonly', true);
    emit('refresh'); // 解决取消的时候表单重置为初始字段值
  } catch (error) {
    console.error(error);
    saveRecordFn(
      props.formState,
      { code: 500 },
      '推送',
      JSON.stringify(props.formState),
    );
  }
};
console.log(props.formState, 'form');
const saveRecordFn = async (
  item: any,
  res: any,
  operateButton: any,
  requestParam: any,
  // operateUri: string,
) => {
  const list = [
    {
      deviceCode: item.code,
      operateModule: '设备管理/设备总览/' + pushList[currentTab()],
      requestParam,
      status: res.code == 200 ? 1 : 0,
      operateButton,
      operateType: typeEnum.value[operateButton],
      operateUri: operateUriList[currentTab()],
    },
  ];
  await saveRecord({ list });
};
</script>
